import React from "react";
import ProCard from '@ant-design/pro-card';
import {Button, Card, Empty, Image, Input, List, Steps, Tag} from 'antd';
import {BarcodeOutlined, ScanOutlined} from "@ant-design/icons";
import {GetOrderProductPart, ScanCommitQC} from "@/api/product";
import {getOriginPic} from "@/types/common";
import {useScanBarcode} from "@/types/scan";
import {padNumLeft} from '@/utils'

const {Step} = Steps;

// ResponseData<Result>
interface Result {
  ProductVo: ProductVo; //  组件信息
  // OrderTechRouteVos?: any;
  // ProductSoloCode: string;
  // CuurenTechRouteVo?: any;
  OrderFileVos: OrderFileVo[];  //  照片文件对象
  OrderProductVo: OrderProductVo; //  产品信息
}

interface OrderProductVo {
  BoardGridId: number;
  CtmName: string;
  GridName?: any;
  Name: string;
  NetOrderProductId: string;
  OrderbagId: number;
  OrderBagVo: OrderBagVo;
  OrderProductCode: string;
  SpeechContent?: any;
  NotifyContent?: any;
  OrderProductId: number;
  OrderProductType: number;
  PhotoNum: number;
  ProductName?: any;
  Spec?: any;
  Status: number;
  StatusFormat: string;
  TechName?: any;
  TechTime?: any;
  CurrentTech?: any;
  NextTech?: any;
  OrderProductVo?: any;
  OrderProductPartVos?: any;
}

interface OrderBagVo {
  OrderbagId: number;
  Name: string;
  NetOrderId: string;
  Shopid: number;
  OrderType: number;
  Priority: number;
  Status: number;
  ShippingNo?: any;
  StatusFormat: string;
  ShopVo: ShopVo;
  GridId: number;
  GridName?: any;
  OrderProductVos?: any;
}

interface ShopVo {
  ShopId: number;
  Name: string;
}

interface OrderFileVo {
  OrderFileId: number;
  OrderFileCode: string;
  OrderProductPartId: number;
  FileName: string;
  FullPath: string;
  CompressPath?: string;
  PixWidth: number;
  PixHeight: number;
  Dpi: number;
  Num: number;
  Status: number;
  FileType: number;
  QNKey?: string;
  ProductFileCode: string;
  ThumbnailPath?: any;
  ThumbnailFile?: any;
  OriginalFileContent?: any;
  ProductSoloCode?: any;
  TechRouteName?: any;
  CurTechName?: any;
}

interface ProductVo {
  ProductId: number;
  Name: string;
  Code: string;
  CategoricalId: number;
  ProductType: number;
  ProductShopType: number;
  ProductSize: string;
  Describe: string;
  CreateBy: number;
  CreateTime: string;
  LastModifyBy: number;
  LastModifyTime: string;
  SizeDetailId: number;
  Status: number;
  ProductPrintTypeId: number;
  CutFilePath: string;
  PVid?: any;
  Weight: number;
  SingleWeight: number;
  LastSyncDate: string;
  LastSyncUser?: any;
  SyncTimes: number;
  MallSyncStatus: number;
}

const routers = [
  "生产开工",
  "打印输出",
  "输出分拣",
  '工厂前台扫描',
  '内页册成册',
  '封面质检',
  "产品合册",
  "产品装封面",
  '内页册产品分拣',
  "包装发货",
]

export default () => {
  // const {lineSelectProps, selectOpt} = useLineSelect();
  const {focusScan, scanBarcodeProps, scanReq: {loading, run, data: result, error}} = useScanBarcode<Result>({
    techId: padNumLeft(55),
    enterCallback: (barcode) => {
      return GetOrderProductPart(barcode).then((result) => result.Result)
    },
    commitCallback: ScanCommitQC
  });

  const scanBarcode = <div>
    <Input
      {...scanBarcodeProps}
      addonBefore={<BarcodeOutlined/>}
      style={{width: 510}}
      autoFocus
    />
    <Button onClick={focusScan} type={'primary'} icon={<ScanOutlined/>}>开始扫描</Button>
  </div>

  const productStep = <Steps style={{height: '100%', overflowY: 'auto'}} current={5} size="small" direction="vertical">
    {routers.map((v, i) => <Step key={v} title={v}/>)}
  </Steps>

  const ProductAndPartInfo = ({orderProductVo = {} as any, productVo, loading, error}: {
    orderProductVo?: OrderProductVo,
    loading: boolean, error?: Error,
    productVo?: ProductVo
  }) => {

    const wrapper = ({content, style}: { content?: any, style?: object } = {}) => {
      const baseStyle = {overflow: 'auto',}
      const {OrderProductCode, CtmName, Name, PhotoNum, StatusFormat, OrderBagVo} = orderProductVo;

      return <ProCard colSpan={4} title={<Tag color="blue">产品和组件信息</Tag>}
                      bodyStyle={{...baseStyle, ...style}}
                      split="horizontal">
        {content ? content : <>
          <ProCard loading={loading} title="产品编号">{OrderProductCode}</ProCard>
          <ProCard loading={loading} title="产品名称">{Name}</ProCard>
          <ProCard loading={loading} title="商户">{OrderBagVo ? OrderBagVo.Name : '~'}</ProCard>
          <ProCard loading={loading} title="照片P数">{PhotoNum}</ProCard>
          <ProCard loading={loading} title="作品名称">{CtmName}</ProCard>
          <ProCard loading={loading} title="备注">{StatusFormat}</ProCard>

          <ProCard loading={loading} title="组件编码">{productVo?.Code}</ProCard>
          <ProCard loading={loading} title="组件名称">{productVo?.Name}</ProCard>
        </>}
      </ProCard>
    }

    //  先判断error
    // if (error){
    //   return <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
    // }

    //  再来判断 loading
    if (loading) {
      return wrapper()
    }

    if (Object.keys(orderProductVo).length) {
      return wrapper()
    } else {
      return wrapper({
        style: {display: `flex`, alignItems: `center`, justifyContent: `center`},
        content: <Empty
          description={<span>请先扫描 </span>}>
        </Empty>
      })
    }

  }


  const PhotoList = ({orderFileListVo}: { orderFileListVo: OrderFileVo[] }) => {

    const contentList = <ProCard bordered
                                 bodyStyle={{padding: '10px'}}
                                 colSpan={16}
                                 style={{height: 'calc(100vh - 150px)'}}
                                 title={<Tag color="blue">半成品照片列表</Tag>}
    >
      <Image.PreviewGroup>
        <List
          loading={loading}
          style={{height: 'calc(100% - 41px)', overflowY: 'auto', overflowX: `hidden`}}
          grid={{gutter: 16, column: 4}}
          dataSource={orderFileListVo}
          renderItem={item => (
            <List.Item>
              <Card
                cover={
                  <Image
                    placeholder={
                      <Image
                        preview={false}
                        src={item.CompressPath}
                      />
                    }
                    src={getOriginPic((item?.CompressPath ?? ''))}
                  />
                }
              >
                <Card.Meta
                  title={item.FileName}
                />
              </Card>
            </List.Item>
          )}
        />
      </Image.PreviewGroup>
    </ProCard>

    //  error
    if (loading) {
      return contentList
    }

    if (orderFileListVo.length) {
      return contentList
    } else {
      return <ProCard bordered
                      bodyStyle={{display: `flex`, alignItems: `center`, justifyContent: `center`}}
                      colSpan={16}
                      title={<Tag color="blue">半成品照片列表</Tag>}
      >
        <Empty description={`请先扫描`}/>
      </ProCard>
    }
  }

  return (
    <div>
      <ProCard
        title={
          scanBarcode
        }
      //   extra={
      //   <Button>打印工具码</Button>
      // }
        split="vertical" bordered headerBordered style={{height: 'calc(100vh - 150px)'}}
      >

        <ProCard title={<Tag color="blue">生产流程</Tag>} colSpan={4}>
          {productStep}
        </ProCard>

        <ProductAndPartInfo loading={loading}
                            error={error}
                            productVo={result?.ProductVo}
                            orderProductVo={result?.OrderProductVo}/>


        <PhotoList orderFileListVo={result ? result.OrderFileVos : []}/>

      </ProCard>
    </div>
  );
};
